<%@page pageEncoding="UTF-8" %>
<%@ include file="../include/header.jsp" %>
<body>
<div id="app" v-cloak>

    <!--条件查询 -->
    <div class="toolbar2">
        <el-form :inline="true" :model="filters" label-position="top" size="small">
            <div style="margin-left: 16px;position: relative;">
                <el-form-item label="经营户名称">
                    <el-input v-model="filters.searchStr" placeholder="经营户名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="区域">
                    <el-cascader v-model="regionIds" :options="regionData" :props="regionProps"
                                 @change="handleRegionChange" clearable></el-cascader>
                </el-form-item>
                <el-form-item label=" ">
                    <el-button type="primary" @click="loadData" class="sbtn">查询</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>

    <div style="position: relative">
        <el-table :data="tableData" border stripe v-loading="loading" :height="tableH" ref="table">
            <el-table-column prop="name" label="经营户名称" min-width="100"></el-table-column>
            <el-table-column prop="districtName" label="区域" min-width="100">
                <template slot-scope="scope">
                    {{scope.row.districtName}}->{{scope.row.townName}}
                </template>
            </el-table-column>
            <el-table-column prop="address" label="地址" min-width="100"></el-table-column>
            <el-table-column prop="bindCamera" label="监控配置状态" min-width="150">
                <template scope="scope">
                    <%-- 如果已经绑定 显示解绑按钮,否则显示去绑定按钮--%>
                    <span v-if="scope.row.bindCamera != null">
                        {{scope.row.bindCamera.name}}
                        <el-button type="button" class="layui-btn" size="small" @click="unBind(scope.$index, scope.row)">解绑
                    </el-button> </span>
                    <el-button v-else type="button" class="layui-btn" size="small"
                               @click="selectToBing(scope.$index, scope.row)">去配置
                    </el-button>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="250">
                <template scope="scope">
                    <el-button type="button" class="layui-btn" size="small"
                               @click="handleJuris1(scope.$index, scope.row)">监管端权限
                    </el-button>
                    <el-button type="button" class="layui-btn" size="small"
                               @click="handleJuris2(scope.$index, scope.row)">经营端权限
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div style="position: absolute;right: 8px;margin: 5px 0 5px 0;">
        <el-pagination v-if="isMobile == 'true'" :current-page="page" :page-size="size" :pager-count="2" :total="total"
                       :page-sizes="[10,20,50,100]" @size-change="sizeChange" @current-change="handleCurrentChange"
                       layout="total, prev, pager, next"></el-pagination>
        <el-pagination v-else :current-page="page" :page-size="size" :total="total" :page-sizes="[10,20,50,100]"
                       @size-change="sizeChange" @current-change="handleCurrentChange"
                       layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    <!--绑定监控配置-->
    <el-dialog title="绑定监控配置" :visible.sync="bingMonitorFonfig" :close-on-click-modal="false" @close="closeBing"
               width="800px">
        <el-form :inline="true" :model="filters" label-position="top" size="small">
            <div style="margin-left: 16px;position: relative;">
                <el-form-item label="请选择区域">
                    <el-cascader v-model="selectedBindOptions" :options="bindOptions" :props="defaultParams"
                                 @change="selectedBindChange" clearable></el-cascader>
                </el-form-item>
            </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitBing" :loading="jurisLoading1">提交</el-button>
        </div>
    </el-dialog>
    <!--监管端监控点权限配置-->
    <el-dialog title="监管端监控点权限配置" :visible.sync="jurisFormVisible1" :close-on-click-modal="false"
               @close="handleCloseJuris1"
               width="900px">
        <el-transfer
                style="text-align: left; display: inline-block;height: 450px;"
                :left-default-checked="[2, 3]"
                :right-default-checked="[1]"
                :titles="['有权限', '无权限']"
                :render-content="renderFunc"
                v-model="rightData"
                @change="hanChange"
                :data="transferData">
        </el-transfer>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleSaveJuris1" :loading="jurisLoading1">提交</el-button>
        </div>
    </el-dialog>
    <!--经营端监控点权限配置-->
    <el-dialog title="经营端监控点权限配置" :visible.sync="jurisFormVisible2" :close-on-click-modal="false"
               @close="handleCloseJuris2"
               width="900px">
        <el-transfer
                style="text-align: left; display: inline-block;height: 450px;"
                :left-default-checked="[2, 3]"
                :right-default-checked="[1]"
                :titles="['有权限', '无权限']"
                :render-content="renderFunc"
                v-model="rightData"
                @change="hanChange"
                :data="transferData">
        </el-transfer>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleSaveJuris2" :loading="jurisLoading1">提交</el-button>
        </div>
    </el-dialog>


</div>
</body>

<script>
    $(window).resize(function () {
        app.tableH = $(window).height() - 155;
    });

    var app = new Vue({
        el: '#app',
        data: {
            isMobile: '${isMobile}',
            tableH: $(window).height() - 155,
            loading: false,
            page: 1,
            size: 10,
            total: 0,
            filters: {
                searchStr: '',
                districtId: '',
                townId: ''
            },
            tableData: [],

            regionIds: [],
            regionData: [],
            regionProps: {
                label: 'name',
                value: 'id',
                children: 'children',
                checkStrictly: true
            },
            // 选择绑定设备数据源处理
            bindOptions: [
            ],
            // 表示默认选择父级的id==1,子集的id为4
            // 当打开某一行的时候,获取那一行,选中的父级is和子集id赋值到当前数组即可恢复选中状态['1', '4']
            selectedBindOptions: [],
            defaultParams: {
                label: 'name',
                value: 'indexCode',
                children: 'children'
            },
            // 保存选择的设备二级数据
            selectBindData:{
                // 表示被编辑那一行的id,提交后才被赋值
                individualId:"",
                name:"",
                indexCode:"",
                treeCode:"0",
                parentIndexCode:""
            },
            jurisFormVisible1: false,
            jurisLoading1: false,
            jurisFormVisible2: false,
            jurisLoading1: false,
            // 选择绑定监控状态
            bingMonitorFonfig: false,
            // 选中绑定设备时,保存索引
            selectIdenx: -1,
            // 穿梭狂数据源
            transferData:[
            ],
            // 穿梭框右侧数据
            rightData:[],
            // 权限更改数据保存
            quanXianConfig:{}
        },
        created: function () {
            this.loadData();
            this.loadRegionData();
            // 获取绑定设备数据源
            this.cameraOrigin()
        },
        methods: {
            loadData: function () {
                this.loading = true;
                var data = Object.assign({
                    state: 1
                }, this.filters);
                data.page = this.page;
                data.size = this.size;
                $.ajax({
                    url: "${ctx}/backstage/noniconfig/query",
                    data: data,
                    dataType: 'json',
                    success: function (returndata) {
                        if (returndata.success) {
                            app.total = returndata.data.count;
                            app.tableData = returndata.data.list;
                        } else {
                            app.total = 0;
                            app.tableData = [];
                            app.$notify.error({
                                title: '错误',
                                message: returndata.errors.message
                            });
                        }
                        app.loading = false;
                    }
                });
            },
            loadRegionData: function () {
                $.ajax({
                    url: "${ctx}/backstage/town/queryRegion",
                    dataType: 'json',
                    success: function (returndata) {
                        if (returndata.success) {
                            app.regionData = returndata.data;
                        } else {
                            app.regionData = [];
                            app.$notify.error({
                                title: '错误',
                                message: returndata.errors.message
                            });
                        }
                    }
                });
            },
            cameraOrigin: function () {
                $.ajax({
                    url: "${ctx}/backstage/noniconfig/cameraOrigin",
                    dataType: 'json',
                    success: function (returndata) {
                        if (returndata.success) {
                            // console.log(JSON.stringify(returndata.data))
                            app.bindOptions = returndata.data;
                        } else {
                            app.bindOptions = [];
                            app.$notify.error({
                                title: '错误',
                                message: returndata.errors.message
                            });
                        }
                    }
                });
            },
            renderFunc(h, option) {
                var _this = this;
                // console.log(h)
                // console.log(option)
                return h(
                    'span', {
                        attrs: {
                            id: option.label
                        },
                        domProps: {
                            innerHTML: option.label
                        },
                        on: {
                            click: function () {
                                console.log(option.key)
                            }
                        }
                    }
                );
            },
            handleSearch: function () {
                this.loadData();
            },
            sizeChange: function (val) {
                this.size = val;
                this.loadData();
            },
            handleCurrentChange: function (val) {
                this.page = val;
                this.loadData();
            },
            handleCloseJuris1: function () {
                this.jurisLoading1 = false;
                this.jurisFormVisible1 = false;
            },
            handleCloseJuris2: function () {
                this.jurisLoading1 = false;
                this.jurisFormVisible2 = false;
            },
            // 绑定监控配置
            selectToBing: function (index, row) {
                this.selectIdenx = index
                this.bingMonitorFonfig = true;
            },
            // 关闭绑定选择窗口
            closeBing: function () {
                this.bingMonitorFonfig = false;
            },
            // 提交监控绑定
            submitBing: function () {
                var that=this
                that.bingMonitorFonfig = false;
                if(that.selectBindData.indexCode.length==0){
                    app.$message({
                        message: "请先绑定区域设备",
                        type: 'error'
                    });
                    return;
                }
                var params = {"indexCode" :that.selectBindData.indexCode,
                    "name":that.selectBindData.name,
                    "individualId":that.tableData[that.selectIdenx].id}
                // 提交绑定
                $.ajax({
                    url: "${ctx}/backstage/noniconfig/bindCamera",
                    data: params ,
                    dataType: 'json',
                    success: function (returndata) {
                        if (returndata.success) {
                            app.$message({
                                message: '提交成功!',
                                type: 'success'
                            });
                            // 保存成功 清空已选择相关数据
                            that.selectBindData={
                                individualId:"",
                                name:"",
                                indexCode:"",
                                treeCode:"0",
                                parentIndexCode:""
                            }
                            // 重新请求数据
                            that.loadData()
                        } else {
                            app.$message({
                                message: returndata.errors.message,
                                type: 'error'
                            });
                        }
                    }
                });
            },
            unBind: function (index, row) {
                let that=this
                let individualId=that.tableData[index].id
                let id=that.tableData[index].cameraId
                // 弹窗确认是否要解绑
                that.$alert('确定解除绑定吗?', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        if(action=="confirm"){
                            // this.$message({
                            //     type: 'info',
                            //     message: "解除绑定的id=="+unBindId
                            // });
                            // 请求解绑
                            $.ajax({
                                url: "${ctx}/backstage/noniconfig/unbindCamera",
                                data: {individualId:individualId,id:id},
                                dataType: 'json',
                                success: function (returndata) {
                                    if (returndata.success) {
                                        app.$message({
                                            message: '解绑成功!',
                                            type: 'success'
                                        });
                                        // 解绑成功 修改该行的已绑定状态为null
                                        that.tableData[index].bindCamera=null
                                    } else {
                                        app.$message({
                                            message: returndata.errors.message,
                                            type: 'error'
                                        });
                                    }
                                }
                            });
                        }else {
                            this.$message({
                                type: 'info',
                                message: "action:"+action
                            });
                        }
                    }
                });
            },
            handleJuris1: function (index, row) {
                let that=this
                if (that.tableData[index].bindCamera == null) {
                    app.$message({
                        message: "请先绑定监控设备",
                        type: 'error'
                    });
                    return
                }
                // 每次打开都先清空数据,请求网络后渲染
                that.transferData=[]
                that.rightData
                // 保存编辑当前行的设备id和数据类型==1  监管端权限
                that.quanXianConfig={cameraId:that.tableData[index].cameraId,client_type:1,camerasIds:""}
                // 先获取数据源,成功后再显示
                that.jurisFormVisible1 = true;
                let data={cameraId:that.tableData[index].cameraId,client_type:1}
                $.ajax({
                    url: "${ctx}/backstage/noniconfig/getCameras",
                    data: data,
                    dataType: 'json',
                    success: function (returndata) {
                        if (returndata.success) {
                            if(returndata.data.length>0){
                                let arr=[]
                                let arrRight=[]
                                returndata.data.forEach(function (v,i) {
                                    arr.push( {"key": v.cameraIndexCode, "label": v.cameraName})
                                    if(!v.isAuth){
                                        arrRight.push(v.cameraIndexCode)
                                    }
                                })
                                that.transferData=arr
                                that.rightData=arrRight
                                console.log(that.rightData)
                            }

                        } else {
                            // app.bindOptions = [];
                            app.$notify.error({
                                title: '错误',
                                message: returndata.errors.message
                            });
                        }
                    }
                });
            },
            handleJuris2: function (index, row) {
                let that=this
                if (that.tableData[index].bindCamera == null) {
                    app.$message({
                        message: "请先绑定监控设备",
                        type: 'error'
                    });
                    return
                }

                // 每次打开都先清空数据,请求网络后渲染
                that.transferData=[]
                that.rightData
                // 保存编辑当前行的设备id和数据类型==2  经营权限端
                that.quanXianConfig={cameraId:that.tableData[index].cameraId,client_type:2,camerasIds:""}
                that.jurisFormVisible2 = true;
                let data={cameraId:that.tableData[index].cameraId,client_type:2}
                $.ajax({
                    url: "${ctx}/backstage/noniconfig/getCameras",
                    data: data,
                    dataType: 'json',
                    success: function (returndata) {
                        if (returndata.success) {
                            if(returndata.data.length>0){
                                let arr=[]
                                let arrRight=[]
                                returndata.data.forEach(function (v,i) {
                                    arr.push( {"key": v.cameraIndexCode, "label": v.cameraName})
                                    if(!v.isAuth){
                                        arrRight.push(v.cameraIndexCode)
                                    }
                                })
                                that.transferData=arr
                                // 把禁止的放到右边
                                that.rightData=arrRight
                            }

                        } else {
                            // app.bindOptions = [];
                            app.$notify.error({
                                title: '错误',
                                message: returndata.errors.message
                            });
                        }
                    }
                });
            },

            handleSaveJuris1: function () {
                let that=this
                // 只要获取右边的数组[key]
                console.log(this.rightData)
                let arr=this.rightData
                that.quanXianConfig.camerasIds=arr.toString()
                $.ajax({
                    url: "${ctx}/backstage/noniconfig/setJurisdiction",
                    data:that.quanXianConfig ,
                    dataType: 'json',
                    success: function (returndata) {
                        if (returndata.success) {
                            app.loadData();
                            app.$message({
                                message: '提交成功!',
                                type: 'success'
                            });
                            app.jurisFormVisible1 = false;
                        } else {
                            app.$message({
                                message: returndata.errors.message,
                                type: 'error'
                            });
                        }
                    }
                });
            },
            handleSaveJuris2: function () {
                let that=this
                // 只要获取右边的数组[key]
                console.log(this.rightData)
                let arr=this.rightData
                that.quanXianConfig.camerasIds=arr.toString()
                $.ajax({
                    url: "${ctx}/backstage/noniconfig/setJurisdiction",
                    data:that.quanXianConfig ,
                    dataType: 'json',
                    success: function (returndata) {
                        if (returndata.success) {
                            app.loadData();
                            app.$message({
                                message: '提交成功!',
                                type: 'success'
                            });
                            app.jurisFormVisible2 = false;
                        } else {
                            app.$message({
                                message: returndata.errors.message,
                                type: 'error'
                            });
                        }
                    }
                });
            },
            handleDelete: function (index, row) {
                this.$confirm('确认删除该记录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    app.jurisLoading1 = true;
                    $.ajax({
                        url: "${ctx}/backstage/noniconfig/delete",
                        data: {
                            id: row.id
                        },
                        dataType: 'json',
                        success: function (returndata) {
                            if (returndata.success) {
                                app.loadData();
                                app.$message({
                                    message: '删除成功!',
                                    type: 'success'
                                });
                            } else {
                                app.$message({
                                    message: returndata.errors.message,
                                    type: 'error'
                                });
                            }
                            app.jurisLoading1 = false;
                        }
                    });
                });
            },
            handleRegionChange: function (val) {
                switch (val.length) {
                    case 0:
                        this.filters.districtId = '';
                        this.filters.townId = '';
                        break;
                    case 1:
                        this.filters.districtId = val[0];
                        this.filters.townId = '';
                        break;
                    case 2:
                        this.filters.districtId = val[0];
                        this.filters.townId = val[1];
                        break;
                }
            },
            selectedBindChange: function (val) {
                var that=this
                switch (val.length) {
                    // case 0:
                    //     this.selectBindData.districtId = '';
                    //     this.selectBindData.townId = '';
                    //     break;
                    // case 1:
                    //     this.selectBindData.districtId = val[0];
                    //     this.selectBindData.townId = '';
                    //     break;
                    case 2:
                        let father_id=val[0]
                        let sun_id=val[1]
                        that.bindOptions.forEach(function (v,i) {
                           if(v.indexCode==father_id){
                               v.children.forEach(function (v1,i1) {
                                    if (v1.indexCode==sun_id){
                                        that.selectBindData=v1
                                    }
                               })
                           }
                        })
                        break;
                }
            },
            // 穿梭框数据改变
            hanChange:function (obj, index) {
                // 0来自左边的数
               if(index==0){
                   this.rightData.push(index)
               }
            }
        }
    });
</script>
